<template>
  <div>
    <div
      class="flex flex-col px-4 py-3 shadow-sm bg-gradient-to-l from-[#F0F8FF] to-[#FFF6FF]"
    >
      <div class="flex flex-row justify-between items-center mb-1">
        <h3 class="text-[#262626] font-bold">{{ title }}</h3>
        <p class="text-yxt-blue text-xs" @click="showCardDetail = !showCardDetail">
          {{ showCardDetail ? "收起" : "展开" }}
        </p>
      </div>
      <div class="flex flex-row items-center">
        <img v-if="isPass" src="@/icons/svg/minute/passingScore.svg" alt="通过" />
        <img v-else src="@/icons/svg/minute/isFailing.svg" alt="未通过" />
        <div class="flex flex-row items-center">
          <span
            class="text-[#52C41A] align-bottom font-medium"
            :style="{ color: getScoreColor(source) }"
            >{{ source }}<span class="text-xs">{{ unit }}</span></span
          >
          <p class="text-[#8C8C8C] text-xs ml-2">{{ des }}</p>
        </div>
      </div>

      <div
        v-show="!isPass && needStudy && isOwner"
        class="flex flex-row items-center mt-2"
      >
        <div
          class="text-sm text-[white] bg-gradient-to-l from-[#FE823F] to-[#FCBB22] py-1 px-2 mr-2 rounded-md"
          @click="onClickStudy"
        >
          去提升
        </div>
        <p class="text-[#FA541C]">提升进度{{ completeProgress }}%，继续加油</p>
      </div>
    </div>

    <!-- 整体评价 -->
    <transition name="fade">
      <div class="flex flex-col" v-show="showCardDetail">
        <div class="flex flex-row items-center mb-4 pt-4">
          <img src="@/icons/svg/minute/evaluate.svg" class="mr-2" />
          <h2 class="font-bold">整体评价</h2>
        </div>
        <p class="text-[#262626] text-sm leading-7">
          {{ dimension }}
        </p>

        <div class="flex flex-row items-center mb-6 pt-4">
          <img src="@/icons/svg/minute/suggestion.svg" class="mr-2" />
          <h2 class="font-bold">改进建议</h2>
        </div>
        <ul
          class="text-[#262626] text-sm mb-2 leading-7"
          :key="suggestion"
          v-for="suggestion in suggestions"
        >
          {{
            suggestion
          }}
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import { useMinutesStore } from "@/store";
import { parseInt } from "lodash";
import { mapActions, mapState } from "pinia";
import { showToast } from "vant";

export default {
  name: "topCard",
  props: {
    title: {
      typeof: String,
      default: "能力评估",
    },

    des: {
      typeof: String,
      default: "能力评估",
    },

    source: {
      typeof: Number,
      default: 0,
    },
    unit: {
      typeof: String,
      default: "分",
    },

    dimension: {
      typeof: String,
      default: "",
    },

    suggestions: {
      typeof: Array,
      default: "",
    },

    needStudy: {
      typeof: Boolean,
      default: false,
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      confId: "conferenceId",
      completeProgress: "completeProgress",
      taskTargetSource: "taskTargetSource",
      isOwner: "isOwner",
    }),

    isPass() {
      return parseInt(this.source) >= (this.taskTargetSource || 60);
    },
  },

  methods: {
    ...mapActions(useMinutesStore, {
      getUserkngAction: "getUserkngAction",
    }),
    async onClickStudy() {
      // 获取学习包
      const res = await this.getUserkngAction();
      console.log("onClickStudy:", res);
      const { code, message } = res;

      if (code === 3004) {
        // 跳转生成页面
        this.$router.push({
          name: "studyGenerate",
          query: {
            confId: this.confId,
          },
        });

        return;
      }

      if (code !== 0) {
        showToast(message);
        return;
      }

      // 保存课程信息 & 跳转学习中心
      this.$router.push({
        name: "study",
        query: {
          confId: this.confId,
        },
      });
    },

    getScoreColor(score) {
      if (score >= 90) return "#52C41A";
      if (score >= 80) return "#4090FF";
      if (score >= 60) return "#FAAD14";
      return "#FF4D4F";
    },
  },
  data() {
    return {
      showCardDetail: false,
    };
  },
};
</script>

<style lang="less" scoped></style>
